<!--
 * @Author: wuwk
 * @Date: 2021-12-16 14:13:04
 * @LastEditors: wuwk
 * @LastEditTime: 2021-12-20 16:40:16
 * @Description: 公共头部组件
-->
<template>
  <div class="wrap">
    <div class="d-flex jc-center">
      <dv-decoration-10 class="dv-dec-10" />
      <div class="d-flex jc-center">
        <dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
        <div class="title">
          <span class="title-text">年度汇算大屏展示</span>
          <dv-decoration-6
            class="dv-dec-6"
            :reverse="true"
            :color="['#50e3c2', '#67a1e5']"
          />
        </div>
        <dv-decoration-8
          class="dv-dec-8"
          :reverse="true"
          :color="['#568aea', '#000000']"
        />
      </div>
      <dv-decoration-10 class="dv-dec-10-s" />
    </div>

    <!-- 第二行 -->
    <div class="d-flex jc-between px-2">
      <div class="d-flex aside-width">
        <div class="react-left ml-3" :class="getClassName('jrsbqk')">
          <span class="react-before"></span>
          <span class="text">{{ menuConfig.jrsbqk.text }}</span>
        </div>
        <div class="react-left ml-3" :class="getClassName('ljsbqk')">
          <span class="text">{{ menuConfig.ljsbqk.text }}</span>
        </div>
        <div class="react-left ml-3" :class="getClassName('sbjdqk')">
          <span class="text">{{ menuConfig.sbjdqk.text }}</span>
        </div>
      </div>
      <div class="d-flex aside-width">
        <div class="react-right mr-3" :class="getClassName('sbtsqk')">
          <span class="text">{{ menuConfig.sbtsqk.text }}</span>
        </div>
        <div class="react-right mr-3" :class="getClassName('sbbsqk')">
          <span class="text">{{ menuConfig.sbbsqk.text }}</span>
        </div>
        <div class="react-right mr-3" :class="getClassName('zxfjkc')">
          <span class="text">{{ menuConfig.zxfjkc.text }}</span>
        </div>
        <div class="react-right mr-3" :class="getClassName('xwphfx')">
          <span class="text">{{ menuConfig.xwphfx.text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MENU_CONFIG } from '@/constant';
export default {
  name: "ProjectIndex",
  
  props: {
    currentMenu: {
      type: String,
    }
  },
  data() {
    return {
      menuConfig: MENU_CONFIG,
    };
  },

  mounted() {
    
  },

  methods: {
    getClassName(menuName) {
      return menuName === this.currentMenu ? 'bg-color-blue':''
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  .dv-dec-10,
.dv-dec-10-s {
  width: 33.3%;
  height: 5px;
}
.dv-dec-10-s {
  transform: rotateY(180deg);
}
.dv-dec-8 {
  width: 200px;
  height: 40px;
}
.title {
  position: relative;
  width: 500px;
  text-align: center;
  background-size: cover;
  background-repeat: no-repeat;

  .title-text {
    font-size: 24px;
    font-weight: bolder;
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translate(-50%);
  }

  .dv-dec-6 {
    position: absolute;
    bottom: -19px;
    left: 50%;
    width: 250px;
    height: 8px;
    transform: translate(-50%);
  }
}

// 第二行
.aside-width {
  width: 40%;
}
.react-r-s,
.react-l-s {
  background-color: #0f1325;
}

// 平行四边形
.react-right {
  &.react-l-s {
    text-align: right;
    width: 500px;
  }
  font-size: 18px;
  width: 300px;
  line-height: 30px;
  text-align: center;
  transform: skewX(-45deg);

  .react-after {
    position: absolute;
    right: -25px;
    top: 0;
    height: 30px;
    width: 30px;
    background-color: #0f1325;
    transform: skewX(45deg);
  }

  .text {
    display: inline-block;
    transform: skewX(45deg);
  }
}

.react-left {
  &.react-l-s {
    width: 500px;
    text-align: left;
  }
  font-size: 18px;
  width: 300px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  transform: skewX(45deg);
  // background-color: #0f1325;

  .react-before {
    position: absolute;
    left: -25px;
    top: 0;
    height: 30px;
    width: 50px;
    // background-color: #0f1325;
    transform: skewX(-45deg);
  }

  .text {
    display: inline-block;
    transform: skewX(-45deg);
  }
}
}
</style>
